<template>
	<div class="menu swiper" >
		<div class="menu_top">
			<ul class="swiper-wrapper">
				<li v-for="item in list" :key="item.id" :class="{ 'default' : iscur===item.id }" @click="iscur = item.id"  class="swiper-slide">
					<span>
					{{item.txt}}
					</span>
				</li>
			</ul>
		</div>
		<div class="menu_bottom">
			<Menu_one  v-if="iscur === 1"></Menu_one>
			<Menu_two v-if="iscur === 2"></Menu_two>
			<Menu_three v-if="iscur === 3"></Menu_three>
			<Menu_four v-if="iscur === 4"></Menu_four>
			<Menu_five v-if="iscur === 5"></Menu_five>
			<Menu_six v-if="iscur === 6"></Menu_six>
			<Menu_seven v-if="iscur === 7"></Menu_seven>
			<Menu_eight v-if="iscur === 8"></Menu_eight>

		</div>
		
		
	</div>
</template>

<script>
	import Menu_one from './Menu_one.vue';
	import Menu_two from './Menu_two.vue';
	import Menu_three from './Menu_three.vue';
	import Menu_four from './Menu_four.vue';
	import Menu_five from './Menu_five.vue';
	import Menu_six from './Menu_six.vue';
	import Menu_seven from './Menu_seven.vue';
	import Menu_eight from './Menu_eight.vue';

	
	// 1引入vue周期函数
	import {onMounted} from 'vue';
	// 2引入swiper的动态组件
	import Swiper ,{
		Autoplay,
		EffectCoverflow,
		EffectCube,
	} from 'swiper';
	// 3swiper组件应用配置
	Swiper.use([Autoplay,EffectCoverflow,EffectCube]);
	
	export default{
		name:'Menu',
		data(){
			return{
				list:[],
				
				iscur : 1,//默认选中第一个标题以及第一个组件
			}
		},
		created(){
			let that = this;
			this.axios.get('/api/dataHome.json').then((res)=>{
				
				that.list = res.data.Homemsg[0].MenuList.list;
				
				
			} ).catch( (error)=>{
				
				console.log(error)
			} )
		},
		setup(){
			onMounted ( ()=> {
				new Swiper('.menu_top',{
					 slidesPerView: 4,
					 centeredSlides:true,
					 centeredSlidesBounds:true,
					 slideToClickedSlide:true,
				})
			})
		},
		components:{
			Menu_one,
			Menu_two,
			Menu_three,
			Menu_four,
			Menu_five,
			Menu_six,
			Menu_seven,
			Menu_eight,

		}
	}
</script>

<style scoped>
	.menu{
		width: 100%;
		overflow: hidden;
	}
	.menu .menu_top{
		width: 100%;
		line-height: 1rem;
	}

	.menu .menu_top li{
		
		text-align: center;
		font-weight: bolder;
		
	}
	
	.menu .menu_top .default{
		background-image: url(../../../../public/img/qqback.png);
		background-size: 30% 60%;/* 图片宽高 */
		background-repeat: no-repeat;/* 图片不平铺 */
		background-position: 50% 50%;/* 背景图片居中 */
	}
	.menu .menu_bottom{
		width: 100%;
		overflow: hidden;
		margin-bottom: 2rem;
	}
</style>
